<template>
  <page-meta :root-font-size="fontSize + 'px'"></page-meta>

  <view class="page-container">

    <view class="scene-container">
      <image class="top-bg-content"
        src="https://rwstatic.tentons.cn/web/Lesson/images/home/home-top-bg.png">
      </image>
      <view class="collection-container">
        <view class="user-content">
          <view class="header" @click="!loginModule.isLogin && loginModule.open()">
            <image class="frame" :src="pageModule.userInfo.headframe.img"></image>
            <image class="icon" :src="pageModule.userInfo.avatar"></image>
          </view>
          <view class="info" @click="pageModule.handleToUserDetail">
            <template v-if="loginModule.isLogin">
              <view class="nickname">
                <image v-show="pageModule.userInfo.is_vip" mode="widthFix" class="vip_logo"
                  src="https://rwstatic.tentons.cn/web/Lesson/images/vip-logo.png">
                </image>
                <text>{{ pageModule.userInfo.nickname }}</text>
              </view>
              <view class="assets">
                <view class="item">
                  <image src="https://rwstatic.tentons.cn/web/Lesson/images/home/assets-icon-1.png" class="icon">
                  </image>
                  <text class="text">{{ formatNumber(pageModule.userInfo.melon_seeds) }}</text>
                </view>
                <view class="item">
                  <image src="https://rwstatic.tentons.cn/web/Lesson/images/home/assets-icon-2.png" class="icon">
                  </image>
                  <text class="text">{{ formatNumber(pageModule.userInfo.debris) }}</text>
                </view>
                <view class="item">
                  <image src="https://rwstatic.tentons.cn/web/Lesson/images/home/assets-icon-3.png" class="icon">
                  </image>
                  <text class="text">{{ formatNumber(pageModule.userInfo.blindVoucher) }}</text>
                </view>
              </view>
            </template>
            <template v-else>
              <view>
                <text @click="loginModule.open">登录/注册</text>
              </view>
            </template>
          </view>
          <image v-show="loginModule.isLogin" @click="pageModule.handleToUserDetail"
            src="https://rwstatic.tentons.cn/web/Lesson/images/arrow-main-icon.png" class="right-icon">
          </image>
        </view>
        <view class="statistics-content base-border">
          <view class="top">
            <view class="base">
              <text class="number">{{ formatNumber(pageModule.userInfo.totalSign) }}</text>
              <text class="text">签到天数</text>
            </view>
            <view class="base">
              <text class="number">{{ formatNumber(pageModule.userInfo.learnedNumber) }}</text>
              <text class="text">累计学词</text>
            </view>
            <view class="base">
              <text class="number">{{ formatNumber(pageModule.userInfo.totalTime) }}</text>
              <text class="text">累计分钟</text>
            </view>
            <view class="base">
              <text class="number">{{ formatNumber(pageModule.userInfo.totalLoginDays) }}</text>
              <text class="text">坚持天数</text>
            </view>
          </view>
          <!-- <view class="bottom" @click="pageModule.handleToStatistics">
            <text>前往统计详情</text>
            <image mode="widthFix" src="https://rwstatic.tentons.cn/web/Lesson/images/arrow-grey-icon.png" class="icon">
            </image>
          </view> -->
        </view>
        <view class="course-content">
          <view class="title">
            <image class="bg" src="https://rwstatic.tentons.cn/web/Lesson/images/star-title-bg.png">
            </image>
            <text class="text">已购课程</text>
          </view>
          <view class="content">

            <template v-if="!loginModule.isLogin">
              <view class="not_logged" @click="!loginModule.isLogin && loginModule.open()">
                <image
                  class="bg"
                  src="https://rwstatic.tentons.cn/web/Lesson/images/home/not-logged-bg.png">
                </image>
                <text class="text">登录后可查看</text>
              </view>
            </template>

            <template v-else>

              <template v-if="pageModule.userInfo.study.length">
                <view class="course">

                  <block v-for="(item) in pageModule.userInfo.study" :key="item.id">
                    <view class="item" @click="pageModule.handleClickCourse(item)">
                      <image class="bg" :src="item.img"></image>
                      <view class="button"></view>
                    </view>
                  </block>

                </view>
              </template>

              <template v-else>
                <view class="empty">
                  <image
                    src="https://rwstatic.tentons.cn/web/Lesson/images/empty-icon.png"
                    class="icon">
                  </image>
                  <text class="text">还没有加入的课程哦，去APP看看吧~</text>
                </view>
              </template>

            </template>
          </view>
        </view>
      </view>
    </view>

    <BasePopup v-model:is-visible="loginModule.show" is-open-emit-visible>
      <template #default>
        <view class="login-content">
          <view class="content">
            <image mode="widthFix" src="https://rwstatic.tentons.cn/web/Lesson/images/home/login-top-bg.png"
              class="top-bg">
            </image>
            <view class="button">
              <button class="base" @getphonenumber="loginModule.onButtonLogin" open-type="getPhoneNumber">
                手机号登录
              </button>
              <button class="base" @click="loginModule.handleWxLogin">
                微信账号登录
              </button>
            </view>
            <view class="hint">
              <text>*如果在App上使用其他登录方式，请先到 <text class="stress">我的页面-绑定手机</text> 或者 <text class="stress">绑定微信</text>
                再来登录</text>
            </view>
          </view>
        </view>
      </template>
    </BasePopup>

    <CwCommon />
  </view>
</template>

<script lang="ts" setup>
import { reactive, ref } from "vue";
import { formatNumber, rootFontSize, util } from "@/utils/util";
import BasePopup from '@/components/basePopup.vue';
import { getAnyApp } from '@/common/hooks';
import { onShow } from "@dcloudio/uni-app";
import API from "@/api";

// 系统总模块
const { Cheese, CHEESE } = getAnyApp();

const fontSize = rootFontSize();

const height = ref(getApp().globalData!.pageTop);

/**
 * 登录模块
 */
const loginModule = reactive({
  isLogin: Cheese.User?.USERINFO.is_login,
  show: false,
  throttled: false, // 节流
  onButtonLogin({ detail: { code } }: any) {
    if (this.throttled) return;
    this.throttled = true;
    if (code) {
      Cheese.User!.setPhoneLogin({ code }, this.close.bind(this));
    } else {
      this.throttled = false;
    }
  },
  handleWxLogin() {
    if (this.throttled) return;
    this.throttled = true;
    Cheese.User!.setWxLogin(this.close.bind(this));
  },
  open() {
    this.show = true;
  },
  close() {
    pageModule.init();
    this.isLogin = true;
    this.show = false;
    this.throttled = false;
  }
});

/**
 * 页面数据模块
 */
const pageModule = reactive({
  userInfo: Cheese.User!.USERINFO,
  pageData: {},
  async init() {
    this.userInfo = Cheese.User!.USERINFO;
  },
  handleClickCourse(course: { id: any; }) {
    API.courseCheck({ course_id: course.id }).then((res: any) => {
      if (res.status == 3) {
        uni.navigateTo({
          url: "/pages/lowPricedCourse/trialCourseHome/trialCourse/index",
        });
      } else if (res.status == 5) {
        // 未开课
        uni.navigateTo({
          url: `/pages/lowPricedCourse/trialCourseHome/notStartCourse/index?course_id=${course.id}`,
        });
      } else {
        util.showDialogue(`状态错误：${res.status}`);
      }
    });
  },
  handleToStatistics() {
    uni.reLaunch({ url: '/pages/tabBar/statistics/index' });
  },
  handleToUserDetail() {
    if (loginModule.isLogin) {
      CHEESE.Router.to({
        url: CHEESE.Router.Home.userInfo,
        isEncode: true,
        params: {
          userInfo: this.userInfo
        }
      });
    }
  }
});

onShow(async () => {
  loginModule.isLogin = await Cheese.User!.checkHasLogin(false);
  pageModule.init();
});
</script>

<style scoped lang="scss">
@mixin fontStyle($size) {
  font-size: #{ $size }rem;
  font-family: xiaolai;
  color: $uni-text-color;
}

.base-border {
  border-radius: 1.5rem;
  border: 2px solid $uni-bg-color-speak;
}

.page-container {
  width: 100vw;
  height: 100vh;
  background-color: #fff;

  .scene-container {
    width: 37.5rem;
    position: absolute;
    bottom: 0;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    box-sizing: border-box;
    overflow-y: auto;
    padding-bottom: calc(constant(safe-area-inset-bottom));
    padding-bottom: calc(env(safe-area-inset-bottom));

    &::-webkit-scrollbar {
      display: none;
      width: 0;
      height: 0;
      color: transparent;
    }
  }

  .top-bg-content {
    width: 100%;
    height: 24.8rem;
  }

  .collection-container {
    position: relative;
    top: -10rem;
    padding-left: 20px;
    padding-right: 20px;

    .user-content {
      display: flex;
      align-items: center;
      justify-content: space-between;

      .header {
        height: 7rem;
        width: 7rem;
        margin-right: 1.5rem;
        position: relative;

        .frame {
          position: absolute;
          height: 11rem;
          width: 11rem;
          left: -2rem;
          top: -2rem;
        }

        .icon {
          height: 100%;
          width: 100%;
          border-radius: 50%;
        }
      }

      .info {
        @include fontStyle(1.7);
        flex: 1;

        .nickname {

          .vip_logo {
            vertical-align: text-bottom;
            width: 2rem;
            margin-right: .5rem;
          }
        }

        .assets {
          margin-top: .8rem;
          display: flex;
          flex-wrap: wrap;
          row-gap: 0.4rem;
          column-gap: 0.4rem;

          .item {
            border: 1px solid #FCE7C3;
            border-radius: 1.4rem;
            padding: 0 .6rem;
            display: flex;
            align-items: center;
            background-color: #FFFDFA;

            .text {
              @include fontStyle(1.2);
              color: #E8A71B;
            }

            .icon {
              margin-right: .2rem;
              width: 2rem;
              height: 2rem;
            }
          }
        }
      }

      .right-icon {
        width: 2rem;
        height: 2rem;
      }
    }

    .statistics-content {
      margin-top: 2rem;
      padding: 1.5rem 0.8rem 0 0.8rem;

      .top {
        display: flex;
        padding-bottom: 1.5rem;
        //border-bottom: 1px solid #F9EEDC;

        .base {
          display: flex;
          flex-direction: column;
          padding: 0 1.2rem;
          width: 25%;
          text-align: center;

          .number {
            @include fontStyle(2.2);
            font-family: baloo;
          }

          .text {
            @include fontStyle(1.3);
            color: $uni-text-color-minor;
          }
        }
      }

      .bottom {
        @include fontStyle(1.2);
        color: $uni-text-color-grey;
        padding: 1.5rem;
        display: flex;
        align-items: center;
        justify-content: center;

        .icon {
          width: 1.2rem;
        }
      }
    }

    .course-content {
      margin-top: 2.2rem;

      .title {
        position: relative;

        .bg {
          vertical-align: middle;
          width: 9.5rem;
          height: 2.2rem;
        }

        .text {
          @include fontStyle(1.7);
          position: absolute;
          left: 0;
        }
      }

      .content {
        padding: 1.2rem 0 2rem 0;

        .course {
          .item {
            &:nth-child(n + 2) {
              margin-top: 1rem;
            }

            .bg {
              vertical-align: middle;
              width: 100%;
              height: 18rem;
            }
          }
        }

        .not_logged {
          overflow: hidden;
          position: relative;

          .bg {
            width: 100%;
            height: 16rem;
            vertical-align: middle;
          }

          .text {
            @include fontStyle(1.5);
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
          }
        }

        .empty {
          @include fontStyle(1.4);
          color: $uni-text-color-grey;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;

          .icon {
            width: 18rem;
            height: 18rem;
          }
        }
      }
    }
  }

  .login-content {
    height: 36.5rem;
    width: 31.5rem;
    background-color: #FFD388;
    border: 2px solid $uni-text-color;
    border-radius: .8rem;
    padding: 1rem;
    box-sizing: border-box;

    .content {
      height: 100%;
      background-color: white;
      border: #D8AB61 solid 1px;
      border-radius: .6rem;

      .top-bg {
        width: 100%;
        position: relative;
        top: -3.2rem;
      }

      .button {
        padding-left: 3rem;
        padding-right: 3rem;

        .base {
          @include fontStyle(1.7);
          height: 5rem;
          line-height: 5rem;
          text-align: center;
          border: 0.2rem solid $uni-btn-border;
          background-color: $uni-btn-prime;
          border-radius: 1rem;
          margin-bottom: 2rem;
          box-sizing: border-box;
        }
      }

      .hint {
        @include fontStyle(1.3);
        color: $uni-text-color-minor;
        padding-left: 3rem;
        padding-right: 3rem;

        .stress {
          color: $uni-bg-color-speak;
        }
      }
    }
  }
}
</style>
